<template>
  <div class="item" @click="$emit('click', goods)">
    <img v-lazy="goods.img_url" />
    <div class="text">
      <div class="title overflow_ellipsis">
        {{ goods.title }}
      </div>
      <div class="footer">
        <span class="price">&yen;&nbsp; {{ goods.sell_price }} </span>
        <span class="buy"> {{ goods.buy }}人购买</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    goods: {
      type: Object,
      required: true,
    },
  },
}
</script>

<style lang="scss" scoped>
.item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 46%;
  margin: 4px;
  overflow: hidden;
  background: #fff;
  border-radius: 6px;

  img {
    width: 100%;
  }

  .text {
    display: flex;
    flex-direction: column;
    padding: 2px;

    .title {
      font-size: 12px;
      color: #333;
    }

    .footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 4px;

      .price {
        padding: 10px 0;
        font-size: 14px;
        color: #f50;
      }

      .buy {
        font-size: 12px;
        color: #999;
      }
    }
  }
}
</style>
